<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-row type="flex" justify="space-between">
          <span>{{ questionQueryList.id ? "修改" : "新增" }}</span>
          <el-button @click="$emit('back')" type="primary" size="small" plain
            >返回列表</el-button
          >
        </el-row>
      </div>
      <el-form
        :inline="true"
        :model="questionQueryList"
        :rules="rules"
        ref="formData"
        label-width="120px"
        class="demo-formData"
      >
        <el-form-item
          label="学科名称"
          prop="subject_id"
          style="margin-right: 160px"
        >
          <el-select
            @change="changeSubject"
            v-model="questionQueryList.subject_id"
            size="small"
            placeholder="请选择学科"
            clearable
          >
            <el-option
              v-for="item in formData.subject"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          prop="directory_id"
          style="margin-right: 160px"
        >
          <el-select
            @change="changeDirectory"
            v-model="questionQueryList.directory_id"
            size="small"
            placeholder="请选择目录"
            clearable
          >
            <el-option
              v-for="item in formData.directory"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="标签名称"
          prop="tag_id"
          style="margin-right: 160px"
        >
          <el-select
            v-model="questionQueryList.tag_id"
            size="small"
            clearable
            allow-create
            multiple
            default-first-option
            placeholder="请选择标签"
          >
            <el-option
              v-for="item in formData.tag"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="试题难度"
          prop="difficulty"
          style="margin-right: 160px"
        >
          <el-radio v-model="questionQueryList.difficulty" :label="1"
            >简单</el-radio
          >
          <el-radio v-model="questionQueryList.difficulty" :label="2"
            >中等</el-radio
          >
          <el-radio v-model="questionQueryList.difficulty" :label="3"
            >较难</el-radio
          >
        </el-form-item>
        <el-form-item
          ref="test"
          label="试题类型"
          prop="quest_type"
          style="margin-right: 160px"
        >
          <el-select
            v-model="questionQueryList.quest_type"
            @change="changeType"
            size="small"
            clearable
            placeholder="请选择题型"
          >
            <el-option
              v-for="item in formData.type"
              :key="item.state"
              :label="item.label"
              :value="item.state"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否面试真题"
          prop="is_true_question"
          style="margin-right: 160px"
        >
          <el-radio v-model="questionQueryList.is_true_question" :label="1"
            >是</el-radio
          >
          <el-radio v-model="questionQueryList.is_true_question" :label="2"
            >否</el-radio
          >
        </el-form-item>
        <el-form-item label="题干信息" prop="question" style="display: block">
          <fullText v-model="questionQueryList.question"></fullText>
        </el-form-item>

        <el-form-item
          label="试题答案"
          prop="quest_answer"
          style="display: block"
        >
          <el-table
            v-if="questionQueryList.quest_type == 1"
            :data="questionQueryList.quest_options"
            border
            style="width: 100%"
          >
            <el-table-column label="单选项" width="140">
              <template slot-scope="scope">
                <el-checkbox
                  v-model="scope.row.is_true"
                  :label="scope.row.code"
                  @change="checkInput(scope.row.code)"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="单选项内容" width="630">
              <template slot-scope="scope">
                <el-input
                  style="width: 600px"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="scope.row.content"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="pic" label="图片"> </el-table-column>
            <el-table-column prop="action" label="操作" width="120">
              <template
                slot-scope="scope"
                v-if="
                  scope.row.code ===
                  enlist[questionQueryList.quest_options.length - 1]
                "
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  circle
                  @click="deltable"
                ></el-button
                ><el-button
                  type="success"
                  size="small"
                  icon="el-icon-plus"
                  @click="addtable"
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            v-else-if="questionQueryList.quest_type == 2"
            :data="questionQueryList.quest_options"
            border
            style="width: 100%"
          >
            <el-table-column prop="is_true" label="多选项" width="140">
              <template slot-scope="scope">
                <el-checkbox
                  v-model="scope.row.is_true"
                  :label="scope.row.code"
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="多选项内容" width="630">
              <template slot-scope="scope">
                <el-input
                  style="width: 600px"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="scope.row.content"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="pic" label="图片"> </el-table-column>
            <el-table-column prop="action" label="操作" width="120">
              <template
                slot-scope="scope"
                v-if="
                  scope.row.code ===
                  enlist[questionQueryList.quest_options.length - 1]
                "
              >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  circle
                  @click="deltable"
                ></el-button
                ><el-button
                  type="success"
                  size="small"
                  icon="el-icon-plus"
                  @click="addtable"
                  circle
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            v-else-if="questionQueryList.quest_type == 3"
            :data="questionQueryList.quest_options"
            border
            style="width: 100%"
          >
            <el-table-column label="判断" width="800">
              <template slot-scope="scope">
                <el-checkbox
                  v-model="scope.row.is_true"
                  :label="scope.row.code"
                  @change="checkInput(scope.row.code)"
                ></el-checkbox>
              </template>
            </el-table-column>
          </el-table>
          <fullQuestionInfo
            v-else-if="questionQueryList.quest_type == 4"
            v-model="questionQueryList.quest_answer"
          ></fullQuestionInfo>
          <p v-else>请选择试题类型，生成答案模板</p>
        </el-form-item>
        <el-form-item label="答案解析" style="display: block">
          <reFullText v-model="questionQueryList.quest_remark"></reFullText>
        </el-form-item>
        <el-form-item style="display: block">
          <el-button type="primary" @click="submitForm('formData')"
            >立即{{ questionQueryList.id ? "修改" : "创建" }}</el-button
          >
          <el-button @click="resetForm('formData')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import fullText from "@/views/exam/components/fullText";
import reFullText from "./reFullText.vue";
import fullQuestionInfo from "@/views/exam/components/fullQuestionInfo";
import { getSubjectApi, addQuestion, editQuestion } from "@/api/question";
import { Message } from "element-ui";
export default {
  name: "AddQuestion",
  props: ["addShow"],
  components: { fullText, reFullText, fullQuestionInfo },
  data() {
    return {
      enlist: ["A", "B", "C", "D", "E", "F"],
      questionQueryList: {
        subject_id: "",
        directory_id: "",
        tag_id: [],
        difficulty: "",
        // 题目类型
        quest_type: "",
        is_true_question: "",
        // 正确答案
        quest_answer: "",
        // 题目信息
        quest_options: [
          { code: "A", content: "", is_true: false, pic: "" },
          { code: "B", content: "", is_true: false, pic: "" },
        ],
        // 答案解析
        quest_remark: "",

        // 题干信息
        question: "",
      },
      formData: {
        subject: [],
        directory: [],
        tag: [],
        difficult: [
          { label: "简单", state: 1 },
          { label: "中等", state: 2 },
          { label: "较难", state: 3 },
        ],
        true: [
          { label: "是", state: 1 },
          { label: "否", state: 2 },
        ],
        type: [
          { label: "单选题", state: 1 },
          { label: "多选题", state: 2 },
          { label: "判断题", state: 3 },
          { label: "简答题", state: 4 },
        ],
      },
      rules: {
        subject_id: [
          { required: true, message: "请选择学科", trigger: "change" },
        ],
        directory_id: [{ required: true, message: "请选择目录" }],
        tag_id: [{ required: true, message: "请选择标签" }],
        difficulty: [
          { required: true, message: "请选择试题难度", trigger: "change" },
        ],
        is_true_question: [
          {
            required: true,
            message: "请选择是否是面试真题",
          },
        ],
        quest_type: [{ required: true, message: "请选择试题类型" }],
        question: [
          { required: true, message: "请输入题干信息", trigger: "blur" },
        ],
        quest_answer: [
          { required: true, message: "请书写试题答案", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 获取学科
    async getSubject() {
      let res = await getSubjectApi();
      this.formData.subject = res;
    },
    // 获取目录
    async changeSubject() {
      if (this.questionQueryList.directory_id) {
        this.questionQueryList.directory_id = "";
      }

      this.questionQueryList.tag_id = "";
      if (!this.questionQueryList.subject_id) {
        return;
      }

      this.formData.directory = this.formData.subject.filter(
        (item) => item.id == this.questionQueryList.subject_id
      )[0].children;
    },
    // 获取标签
    async changeDirectory() {
      this.questionQueryList.tag_id = "";
      if (!this.questionQueryList.directory_id) {
        return;
      }

      this.formData.tag = this.formData.directory.filter(
        (item) => item.id == this.questionQueryList.directory_id
      )[0].children;
    },
    // 按钮删除新增选择项
    deltable() {
      if (this.questionQueryList.quest_options.length === 2) {
        return Message.warning("就俩咯");
      }
      this.questionQueryList.quest_options.pop();
    },
    // 按钮新增选择项
    addtable() {
      if (this.questionQueryList.quest_options.length === 6) {
        return Message.warning("最多六个");
      }
      this.questionQueryList.quest_options.push({
        code: this.enlist[this.questionQueryList.quest_options.length],
        content: "",
        is_true: false,
        pic: "",
      });
    },
    //点击选择框，更新答案
    checkInput(code) {
      this.questionQueryList.quest_options.forEach((item) => {
        if (item.code !== code) {
          item.is_true = false;
        }
      });
      this.questionQueryList.quest_answer = code;
    },
    async submitForm() {
      try {
        await this.$refs.formData.validate();
      } catch (error) {
        return;
      }
      if (this.questionQueryList.id) {
        await editQuestion(this.questionQueryList);
        Message.success("修改成功");
      } else {
        await addQuestion(this.questionQueryList);
        Message.success("增加成功");
      }
      this.$emit("back");
      this.$emit("updateList");
    },
    resetForm() {
      this.questionQueryList = {
        subject_id: "",
        directory_id: "",
        tag_id: "",
        difficulty: "",
        // 题目类型
        quest_type: "",
        is_true_question: "",
        // 正确答案
        quest_answer: "",
        // 题目信息
        quest_options: [
          { code: "A", content: "", is_true: false, pic: "" },
          { code: "B", content: "", is_true: false, pic: "" },
        ],
        // 答案解析
        quest_remark: "",

        // 题干信息
        question: "",
      };
      this.$refs.formData.resetFields();
      this.$emit("back");
    },
    changeType() {
      this.questionQueryList.quest_answer = "";
      if (this.questionQueryList.quest_type == 3) {
        this.questionQueryList.quest_options = [
          { code: "正确", content: "", is_true: false, pic: "" },
          { code: "错误", content: "", is_true: false, pic: "" },
        ];
      } else if (this.questionQueryList.quest_type == 2) {
        this.questionQueryList.quest_options = [
          { code: "A", content: "", is_true: false, pic: "" },
          { code: "B", content: "", is_true: false, pic: "" },
        ];
      }
    },
  },
  created() {
    this.getSubject();
  },
  watch: {
    // 检测选择数组变化，以更新答案
    "questionQueryList.quest_options": {
      deep: true,
      handler() {
        if (this.questionQueryList.quest_type == 2) {
          let answer = "";
          this.questionQueryList.quest_options.forEach((item) => {
            if (item.is_true === true) {
              if (!answer) {
                answer = answer + item.code;
              } else {
                answer = answer + "," + item.code;
              }
            }
          });
          this.questionQueryList.quest_answer = answer;
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>
